<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>企业微信信息化平台</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/index.css}">
</head>
<body>

<script th:src="@{/layui/layui.js}"></script>

<script th:src="@{/layui/jquery-3.6.0.min.js}"></script>

<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">-->
<!--    <legend>企业微信信息化</legend>-->
<!--</fieldset>-->

<div class="layui-fluid " style="overflow:no-display">

    <!--        style="max-height: calc(100vh); overflow:auto;"-->
    <div class="layui-col-md1">
        <form class="layui-form">
            <label>
                <select name="all_engineer" lay-verify="" lay-search lay-filter="formDemo" id="all_engineer">
                    <option value="all_engineer">全部员工</option>
                    <option th:each="engineer : ${all_engineer}" th:id="${engineer.getWx_engineer_id()}"
                            th:value="${engineer.getEngineer_name()}"
                            th:text="${engineer.getEngineer_name()}"></option>
                </select>
            </label>

            <!--            <label for="test10">日期时间范围</label>-->
            <!--            <input type="text" class="layui-input" id="test10">-->


        </form>
        <div class="layui-panel">
            <ul class="layui-menu" id="docDemoMenu1">
                <li lay-options="{type:'problem',status:0, engineer_id:'all_engineer'}">
                    <div class="layui-menu-body-title" id="problemOn">未处理问题</div>
                </li>
                <li lay-options="{type:'message',status:0, engineer_id:'all_engineer'}">
                    <div class="layui-menu-body-title">未响应消息</div>
                </li>

                <li lay-options="{type: 'message',status:1, engineer_id:'all_engineer'}">
                    <div class="layui-menu-body-title">已响应消息</div>
                </li>
                <li lay-options="{type:'problem',status:1, engineer_id:'all_engineer'}">
                    <div class="layui-menu-body-title">已处理问题</div>
                </li>

            </ul>
        </div>

    </div>
    <div class="layui-col-md3" style="max-height: calc(100vh); overflow:auto; ">

        <table class="layui-table">
            <colgroup>
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>群名</th>
            </tr>
            </thead>
            <tbody id="group_list">
            </tbody>
        </table>
    </div>

    <div class="layui-col-md8 " style="max-height: calc(100vh); overflow:auto; " id="div1">
        <div class="layui-form">
            <div id="message_card"></div>
            <table class="layui-table">
                <colgroup>

                    <col style="width: 40%">
                    <col style="width: 4%">
                    <col style="width: 7%">
                    <col style="width: 4%">

                </colgroup>
                <thead>
                <tr>
                    <th>问题</th>
                    <th>工程师</th>
                    <th>创建时间</th>
                    <th>解决</th>
                </tr>
                </thead>
                <tbody id="message_list">
                <!--                    <tr>-->
                <!--                        <td>text</td>-->
                <!--                        <td>engineer</td>-->
                <!--                        <td>time</td>-->
                <!--                        <td>button</td>-->
                <!--                    </tr>-->
                </tbody>
            </table>
        </div>
    </div>

</div>


<script>
    $(document).ready(function () {
        let nScrollHeight = 0; //滚动距离总长(注意不是滚动条的长度)
        let nScrollTop = 0;   //滚动到的当前位置
        let nDivHeight = document.getElementById('div1').scrollHeight

        document.getElementById('div1').onscroll=function (options) {
            console.log("222")
        }
        console.log(nDivHeight)
        $("#div1").scroll(function () {
            nScrollHeight = $(this)[0].scrollHeight;
            nScrollTop = $(this)[0].scrollTop;
            if (nScrollTop + nDivHeight >= nScrollHeight) {
                console.log("111")
            }
            console.log(nDivHeight)
            console.log(nScrollTop)
            console.log(nScrollHeight)
        });
    });


    // 默认选择的消息类型、消息状态、工程师id(默认是全部门)、群id、群名、消息id
    let options = {type: "problem", status: "0", engineer_id: "all_engineer", cp_id: "", cp_name: "", hq: ""}

    //群名列表
    let group_list = document.getElementById("group_list")

    //<span class="layui-badge layui-bg-cyan">数量</span>
    // 群名列表按钮所需单元格元素
    let div_group_msg = "<tr>\n" +
        "                    <td><button type=\"button\"  onclick=\"selMsgByGroup(id,value,'待处理数量')\" class=\"layui-btn layui-btn-normal layui-btn-fluid\" id='cp_id' value='群名'>cp_name</button></td>\n" +
        "                </tr>"
    //解决按钮所需元素
    let button_update_msg_status = "<button type=\"button\"  onclick=\"update_message_status('msg_id','engineer')\" class=\"layui-btn layui-btn-normal layui-btn-fluid\" >解决</button>"

    layui.use('laydate', function () {
        const layDate = layui.laydate;

        //日期时间范围
        layDate.render({
            elem: '#test10'
            , type: 'datetime'
            , range: true

        });
    });


    //菜单栏事件，获取选择的消息类型与消息状态
    layui.use('dropdown', function () {
        let dropdown = layui.dropdown;
        //菜单点击事件，其中 docDemoMenu1 对应的是菜单结构上的 id 指
        dropdown.on('click(docDemoMenu1)', function (data) {
            options.type = data.type
            options.status = data.status
            // const othis = $(this); //当前菜单列表的 DOM 对象
            document.getElementById("message_list").innerHTML = ''
            ask_all_group_message(options)

            ask_all_message(options)
        });
    });

    function ask_all_message(options) {
        $.ajax({
            url: "/ask_all_message"
            , data: {
                data: JSON.stringify(options)
            }
            , type: "get"
            , dataType: "json"
            , contentType: "application/json;charset=utf-8"
            , success: function (data) {
                add_msg_list(data)
            }
        })
    }

    let form_solution = "<form class='layui-form' lay-filter=\"solution_input\"> \n" +
        "      <textarea placeholder=\"请输入内容\" class=\"layui-textarea\" name=\"solution\"></textarea>\n" +
        "    <button type=\"button\" class=\"layui-btn layui-btn-fluid\" id=\"LAY-component-form-getval\">提交</button></form>"

    function update_problem_status(msg_id, engineer) {

        layui.use('layer', function () {
            layer.open({
                type: 1,
                title: "填写你的解决方案",
                scrollbar: false,
                content: form_solution,
                area: ['420px', '195px']
            });

            layui.use('form', function () {
                const form = layui.form;
                //表单取值
                layui.$('#LAY-component-form-getval').on('click', function () {
                    let data = form.val('solution_input');
                    if (data['solution'] !== "") {
                        data['engineer'] = engineer
                        data['hq'] = msg_id
                        data['type'] = options.type
                        data['status'] = options.status
                        ajax_update_status(data)
                        parent.layer.closeAll()
                        layer.msg('已经解决啦');
                        document.getElementById(msg_id).innerHTML = ''
                        //关闭悬浮框
                    } else {
                        layer.msg('你还没有输入解决方案哦');
                    }

                });

            });
        })
    }

    //ajax请求修改问题状态
    function ajax_update_status(options) {
        let return_data = 0
        $.ajax({
            url: "/update_msg_status"
            , data: {
                data: JSON.stringify(options)
            }
            , type: "get"
            , dataType: "json"
            , contentType: "application/json;charset=utf-8"
            , success: function (data) {
                // console.log(data)
                return_data = data
            }
        })
        return return_data
    }

    function update_message_status(msg_id, engineer) {

        let data = {}
        data['engineer'] = engineer
        data['hq'] = msg_id
        data['type'] = options.type
        data['status'] = options.status

        ajax_update_status(data)
        layer.msg('已经修改成功');
        document.getElementById(msg_id).innerHTML = ''
    }

    function compare(property) {
        return function (obj1, obj2) {
            const value1 = obj1[property];
            const value2 = obj2[property];
            return value1 - value2;     // 升序
        }
    }


    function ask_all_group_message(data) {
        $.ajax({
            url: "/all_group_message"
            , data: {
                data: JSON.stringify(data)
            }
            , type: "get"
            , dataType: "json"
            , contentType: "application/json;charset=utf-8"
            , success: function (data) {
                data.sort(compare("time"))
                add_group_info(data)
                // console.log(data)
            }
        })
    }

    let div_message_list = "<tr id='hq_id'>\n" +
        "                        <td> text</td>\n" +
        "                        <td>engineer</td>\n" +
        "                        <td>time</td>\n" +
        "                        <td>button</td>\n" +
        "                    </tr>"

    function addZero(m) {
        return m < 10 ? '0' + m : m;
    }

    function selMsgByGroup(id, cp_name, count_msg) {
        options.hq = count_msg
        options.cp_id = id
        options.cp_name = cp_name

        // console.log(JSON.stringify(options))

        $.ajax({
            url: "/msg_byGroupId"
            , data: {
                data: JSON.stringify(options)
            }
            , type: "get"
            , dataType: "json"
            , contentType: "application/json;charset=utf-8"
            , success: function (data) {
                add_msg_list(data)
            }
        })
    }

    //向问题列表添加具体问题
    function add_msg_list(data) {

        let temp_message_list

        let messageList = document.getElementById("message_list")
        messageList.innerHTML = ''
        for (let i = 0; i < data.length; i++) {

            let timeTemp;
            temp_message_list = div_message_list.replace("text", data[i]['text'])
            temp_message_list = temp_message_list.replace("engineer", data[i]['engineer'])

            let date = new Date(data[i]['time'] * 1000)

            let Y = date.getFullYear() + '-';
            let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            let D = date.getDate() + ' ';
            let h = date.getHours() + ':';
            let m = date.getMinutes() + ':';
            let s = date.getSeconds();
            timeTemp = Y + addZero(M) + addZero(D) + addZero(h) + addZero(m) + addZero(s)

            temp_message_list = temp_message_list.replace("time", timeTemp)
            temp_message_list = temp_message_list.replace("hq_id", data[i]['hq'])

            if (data[i]['status'] === 0) {
                //按钮
                let temp_button_update_msg_status = button_update_msg_status.replace("msg_id", data[i]['hq'])
                temp_button_update_msg_status = temp_button_update_msg_status.replace("engineer", data[i]['engineer'])
                // temp_button_update_msg_status = temp_button_update_msg_status.replace("engineer", data[i])
                // options.engineer_id=data[i]['engineer']

                if (data[i]['type'] === 'message') {
                    temp_button_update_msg_status = temp_button_update_msg_status.replace("update_message_status", 'update_message_status')
                } else {
                    temp_button_update_msg_status = temp_button_update_msg_status.replace("update_message_status", 'update_problem_status')
                }
                temp_message_list = temp_message_list.replace("button", temp_button_update_msg_status)
                // temp_message_list = temp_message_list.replace("button", button_update_msg_status.replace("engineer", data[i]['engineer']))

            } else if (data[i]['status'] === 1) {
                //解决人
                temp_message_list = temp_message_list.replace("button", data[i]['solution']+"<br>【"+data[i]['processor']+"】")
            }
            messageList.innerHTML += temp_message_list
        }
    }

    function add_group_info(data) {
        let div_group_msg_temp;
        group_list.innerHTML = ""
        for (let i = 0; i < data.length; i++) {
            div_group_msg_temp = div_group_msg.replace("cp_name", data[i]["cpname"] + "【" + data[i]["hq"] + "】")
            div_group_msg_temp = div_group_msg_temp.replace("群名", data[i]["cpname"])
            div_group_msg_temp = div_group_msg_temp.replace("cp_id", data[i]["cpid"])
            // div_group_msg_temp = div_group_msg_temp.replace("数量", "数量" + data[i]["hq"])
            div_group_msg_temp = div_group_msg_temp.replace("待处理数量", data[i]["hq"])
            group_list.innerHTML = group_list.innerHTML + div_group_msg_temp
        }


    }

    // {"engineer_name":"","group_name":"","type":"problem","status":"all"}
    layui.use('form', function () {
        const form = layui.form;
        form.on('select(formDemo)', function (data) {

            options.engineer_id = data.value
            // console.log('选择的员工id' + options.toString()); //得到被选中的值
            ask_all_group_message(options)
            ask_all_message(options)
        });

    });
    let problemOn = document.getElementById('problemOn')
    console.log(problemOn)
    problemOn.click()
    ask_all_group_message(options)
    ask_all_message(options)
</script>


</body>
</html>